<template>
   <!-- 编辑信息 -->
      <el-drawer title="编辑用户信息" :append-to-body="true" :visible.sync="editVisible">
        <div class="padd20">
          <el-form :model="form" label-position='left' :rules="rule" ref="editform" label-width="110px">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-radio-group v-model="form.gender">
                <el-radio :label="0">保密</el-radio>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="新密码：" v-show="false">
              <el-input type="password" v-model="form.newPsw" ></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" v-show="false"> 
              <el-input type="password" v-model="form.psw"></el-input>
            </el-form-item>
            <el-form-item label="用户启用状态：">
              <el-switch v-model="form.state" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"> </el-switch>
            </el-form-item>
          </el-form>
          <div class="d-footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="save()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
</template>
           
<script>
export default{
  data() {
    return {
      editVisible: false,
      loading: false,
      openid:'',
      form: {
        phone: '',
        gender: 0,
        newPsw: '',
        psw: '',
        state: 1
      },
      rule:{
        phone: [
          { required: true, pattern:this.$regular.tellPhone(), message: '手机号格式错误', trigger: 'blur'},
        ],
      
      }
    }
  },
  computed: {
    queryData() {
      let obj = this.form
      obj.openid = this.openid
      return obj
    }
  },
  methods: {
    edit(val) {
      this.editVisible = true
      console.log(val,789);
      this.openid = val.openid
      this.form = val
    },
    save() {
      this.$refs.editform.validate(valid => {
        if(valid){
          this.loading = true
          this.$http.httpPost('/user/modifyUser', this.queryData).then(res=>{
            if(res.data.code === 0){
              this.loading = false
              this.editVisible = false
            }
          })
        }
      })
      
    },
    cancelForm() {
      this.loading = false
      this.editVisible = false
    }
  },
}
</script>
<style lang='less' scoped>
.padd20 {
  padding: 0 20px;
}
.d-footer{
  display: flex;
  button{
    flex: 1
  }     
}  
</style>